<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
  >
    <template #top>
      <wd-navbar 
        title="新闻资讯" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>

    <view class="px-[24rpx] box-border">
      <view 
        class="news-item" 
        v-for="item in dataList" 
        :key="item.id"
        @click="handleNewsClick(item)"
      >
        <view class="news-cover">
          <image :src="item.cover" mode="aspectFill" class="w-full h-full" />
        </view>
        <view class="news-title">{{ item.title }}</view>
        <view class="news-time">{{ item.time }}</view>
      </view>
    </view>
  </z-paging>
</template>


<script setup>
import { ref } from 'vue'

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '新闻资讯',
  },
})

defineOptions({
  name: 'News',
})

const pagingRef = ref(null)
const dataList = ref([])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  // TODO: 这里应该调用后端接口获取数据
  // 目前使用假数据模拟
  
  setTimeout(() => {
    const mockData = []
    const startIndex = (pageNo - 1) * pageSize
    const total = 50
    const endIndex = Math.min(startIndex + pageSize, total)
    
    for (let i = startIndex; i < endIndex; i++) {
      const index = i + 1
      mockData.push({
        id: index,
        title: `BrainCo智能仪在手青桐联赛总冠军式启动,助力大众点燃羽火!${index}`,
        cover: `https://picsum.photos/500/300?random=${index}`,
        time: `2025-${(index % 12 + 1).toString().padStart(2, '0')}-${(index % 28 + 1).toString().padStart(2, '0')}`,
      })
    }
    
    pagingRef.value?.complete(mockData)
  }, 500)
}

// 点击新闻项
const handleNewsClick = (item) => {
  // TODO: 跳转到新闻详情页
   uni.navigateTo({
     url: `/pages-children/newsDetail/index?url=${'https://mp.weixin.qq.com/s/SWNddy3eHN05cVoj6rlEhQ'}`
   })
}
</script>

<style>
page{
  background-color: #F1F1F1;
}
</style>

<style lang="scss" scoped>

.news-item {
  background: #fff;
  border-radius: 16rpx;
  margin-top: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.news-cover {
  width: 100%;
  height: 360rpx;
  overflow: hidden;
}

.news-title {
  font-size: 28rpx;
  font-weight: 400;
  color: #282828;
  line-height: 40rpx;
  padding: 20rpx 24rpx 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.news-time {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  padding: 0 24rpx 20rpx;
}
</style>
